<%--
  Created by IntelliJ IDEA.
  User: zrw
  Date: 2019/12/12
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>小组成交量统计</title>

    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../echarts/dist/echarts.min.js"></script>
    <script src="../echarts/theme/macarons.js"></script>
    <style type="text/css">
        * {
            color: #909399;
            font-size: 14px;
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }
        h1 {
            font-size: 22px;
            text-align: center;
        }
        .date {
            margin-left: 40px;
        }
        /* 去除el-table底部的滚动条 */
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
        #chart {
            margin-top: 20px;
        }
        input.el-input__inner {
            color: #86868b;
            font-weight: bold;
        }
        .el-table th .cell {
            color: #86868b;
            font-weight: normal;
        }
        .el-table td div {
            color: #86868b;
        }
    </style>
</head>
<body>
    <h1>小组成交量</h1>
    <div id="app">
        <template>
            <div class="block date">
                <span class="demonstration">选择查询日期：</span>
                <el-date-picker
                        v-model="value1"
                        type="date"
                        value-format="yyyy-MM-dd"
                        @change="getSelectTime"
                        placeholder="选择日期">

                </el-date-picker>
            </div>
            <div class="block" style="float: right;">
                <el-table :data="tableData" border @cell-click="handleCellClick" style="width: 440px;">
                    <el-table-column prop="gName" label="组名" width="140">
                        <template slot-scope="scope">
                            <div v-html="scope.row.gName" style="color: #909399; cursor: pointer;" ></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gPers" label="小组人数" width="100">
                        <template slot-scope="scope">
                            <div v-html="scope.row.gPers" style="color: #909399;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="success" label="成交量" width="100">
                        <template slot-scope="scope">
                            <div v-html="scope.row.success" style="color: #909399;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="average" label="平均值" width="100">
                        <template slot-scope="scope">
                            <div v-html="scope.row.average" style="color: #909399;"></div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </div>
    <div id="chart" style="width: 800px; height: 400px; float: left;"></div>
    <script>
        var datas = ${all};
        var xdata = [];
        var ydata = [];
        for (i in datas) {
            xdata[i] = datas[i].gName;
            ydata[i] = datas[i].success;
        }
        var chart = echarts.init(document.getElementById('chart'), 'macarons');
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['成交量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xdata,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '成交量',
                    type: 'bar',
                    barWidth: 20,
                    data: ydata
                }
            ]
        };
        chart.setOption(option);
        var Main = {
            data() {
                return {
                    value1: '${today}',
                    tableData: ${all}
                    /*currentPage: 1,
                    counts: ${groups}[0].total*/
                }
            },
            methods: {
                getSelectTime(val) {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "listTodayGroupData",
                        data: "timer=" + val,
                        success: function(data) {
                            _this.tableData = data;
                            datas = data;
                            xdata = [];
                            ydata = [];
                            for (i in datas) {
                                xdata[i] = datas[i].gName;
                                ydata[i] = datas[i].success;
                            }
                            chart = echarts.init(document.getElementById('chart'), 'macarons');
                            option = {
                                color: ['#3398DB'],
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                legend: {
                                    data: ['成交量']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: xdata,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '成交量',
                                        type: 'bar',
                                        barWidth: '20',
                                        data: ydata
                                    }
                                ]
                            }
                            chart.setOption(option);
                        }
                    });
                },
                handleCellClick(row, column, cell, event) {
                    location.href = "listGroupMember?gId=" + row.gId + "&gName=" + row.gName;



                }
               /* handleCurrentChange(val) {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "listTodayGroupData",
                        data: "start=" + val,
                        success: function(data) {
                            _this.tableData = data;
                        }
                    });
                }*/
            }
        }
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
</body>
</html>
